import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import './App.css'
import './static/globalCss.css'
import routes from './router';

export default function App() {
    const element = useRoutes(routes)
    function computedClass({isActive}) {
        return isActive?'list-group-item custom':'list-group-item'
    }
  return (
    <>
    <div className='container'>
        <div className='conatiner-nav'>
            <button className='nav-item'><NavLink style={{display:'block'}} to="/index">Index</NavLink></button>
            <button className='nav-item'><NavLink style={{display:'block'}} to="/list">List</NavLink></button>
            <div className='list-group'>
                {/* 路由链接 */}
                {/* 第一种写法 */}
                <NavLink className={computedClass} to="/index">Index</NavLink>
                <NavLink className={computedClass} to="/list">List</NavLink>
                {/* 第二种写法 */}
                {/* <NavLink className={({isActive}) => isActive?'list-group-item custom':'list-group-item'} to="/index">Index</NavLink>
                <NavLink className={({isActive}) => isActive?'list-group-item custom':'list-group-item'} to="/list">List</NavLink> */}
            </div>
        </div>
        <div className='container-show'>
            {/* 注册路由 */}
            {element}
        </div>
    </div>
    </>
  )
}
